<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="需求状态">
					<el-select class="w-[280px]" v-model="queryParams.status" placeholder="请选择" clearable filterable>
						<el-option v-for="item in optionsData.status_list" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="发布人">
					<el-input class="w-[280px]" v-model="queryParams.real_name" clearable />
				</el-form-item>
				<el-form-item label="发布人手机号">
					<el-input class="w-[280px]" v-model="queryParams.account" clearable />
				</el-form-item>
				<el-form-item label="创建时间">
					<div class="date-inp">
						<daterange-picker
							type="daterange"
							valueFormat="YYYY-MM-DD"
							v-model:startTime="queryParams.start_time"
							v-model:endTime="queryParams.end_time"
						/>
					</div>
				</el-form-item>
				<el-form-item label="所属城市">
					<el-select-v2
                        v-model="queryParams.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="w-[280px]"
                        :height="280"
                    />
				</el-form-item>
				<el-form-item label="催一下">
					<el-select class="w-[280px]" v-model="queryParams.is_accelerated">
						<el-option label="全部" value/>
						<el-option label="是" :value="1"/>
						<el-option label="否" :value="0"/>
					</el-select>
				</el-form-item>
				<el-form-item label="需求来源">
					<el-select class="w-[280px]" v-model="queryParams.source_type">
						<el-option label="全部" value/>
						<el-option label="平台需求" :value="1"/>
						<el-option label="CRM需求" :value="2"/>
						<el-option label="直接合作补单" :value="3"/>
					</el-select>
				</el-form-item>
				<el-form-item label="是否添加微信">
					<el-select class="w-[280px]" v-model="queryParams.add_wx">
						<el-option label="全部" :value="0"/>
						<el-option label="未添加" :value="1"/>
						<el-option label="已添加" :value="2"/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<!-- 表格信息 -->
		<el-card class="!border-none" shadow="never">
			<el-table size="large" v-loading="pager.loading" :data="pager.lists" @row-click="handle">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="80" />
				<el-table-column label="所属城市" prop="area_id" min-width="110" >
					<template #default="{ row }">
						<span v-if="row.area_id" v-city="row.area_id"></span>
						<span v-else>平台</span>
					</template>
				</el-table-column>
				<el-table-column label="需求描述" min-width="180">
					<template #default="{ row }">
						<div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.description" placement="top">
								<template #content>
									<div class="w-52">{{ row.description }}</div>
								</template>
                                <div class="text-base line-clamp-2">
                                    {{ row.description }}
                                </div>
                            </el-tooltip>
                        </div>
					</template>
				</el-table-column>
				<el-table-column label="需求状态" min-width="160">
					<template #default="{ row }">
						<el-button type="primary" link v-if="row.status == 1">审核中</el-button>
						<el-button type="primary" link v-if="row.status == 2">发布中</el-button>
						<el-button type="primary" link v-if="row.status == 3">审核驳回</el-button>
						<el-button type="primary" link v-if="row.status == 4">对接中</el-button>
						<el-button type="primary" link v-if="row.status == 5">已完结</el-button>
						<el-button type="primary" link v-if="row.status == 6">已关闭</el-button>
					</template>
				</el-table-column>
				<el-table-column label="状态详情" prop="progress_sub_desc" min-width="180">
					<template #default="{ row }">
						<span v-if="row.progress_sub_desc == ''">-</span>
						<span v-else>{{ row.progress_sub_desc }}</span>
					</template>
				</el-table-column>
				<el-table-column label="所需额度（万）" min-width="160">
					<template #default="{ row }">
						<span v-if="row.quota == 0">-</span>
						<el-button v-else type="primary" link>{{(row.quota/10000).toFixed(2)}}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="客户年龄（岁）" prop="age" min-width="130">
					<template #default="{ row }">
						<span v-if="row.age == 0">-</span>
						<span v-else>{{ row.age }}</span>
					</template>
				</el-table-column>
				<el-table-column label="业务类型" min-width="200">
					<template #default="{ row }">
						<div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.cates.join(',')" placement="top">
								<template #content>
									<div class="w-52">{{ row.cates.join(',') }}</div>
								</template>
                                <div class="text-base line-clamp-2">
                                    {{ row.cates.join(',') }}
                                </div>
                            </el-tooltip>
                        </div>
						<div v-if="row.cates.length == 0" class="ml-4 overflow-hidden">-</div>
					</template>
				</el-table-column>
				<el-table-column label="跟进记录" min-width="200">
					<template #default="{ row }">
						<div class="ml-4 overflow-hidden">
                            <el-tooltip effect="dark" :content="row.follow_notice" placement="top">
								<template #content>
									<div class="w-52">{{ row.follow_notice }}</div>
								</template>
                                <div class="text-base line-clamp-2">
                                    {{ row.follow_notice }}
                                </div>
                            </el-tooltip>
                        </div>
						<div v-if="row.follow_notice == null" class="ml-4 overflow-hidden">-</div>
					</template>
				</el-table-column>
				<el-table-column label="是否添加微信" prop="create_time" min-width="140">
					<template #default="{ row }">
						<span v-if="row.add_wx == 1">已添加</span>
						<span v-else>未添加</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="create_time" min-width="180" />
				<el-table-column label="发布人" prop="real_name" min-width="100" />
				<el-table-column label="发布人手机号" prop="account" min-width="120" />
				<el-table-column label="催一下" prop="is_accelerated" min-width="100">
					<template #default="{ row }">
						<span v-if="row.is_accelerated == 1">是</span>
						<span>否</span>
					</template>
				</el-table-column>
				<el-table-column label="需求来源" prop="source_type" min-width="120">
					<template #default="{ row }">
						<span v-if="row.source_type == 1">平台需求</span>
						<span v-else-if="row.source_type == 2">CRM需求</span>
						<span v-else-if="row.source_type == 3">直接合作补单</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="标签" prop="is_urgent" min-width="120">
					<template #default="{ row }">
						<span v-if="row.is_urgent == 1">需求加急</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="260" fixed="right">
					<template #default="{ row }">
						<!-- <router-link   :to="{ path: getRoutePath('demand.demand/detail'), query: { id: row.id } }">
							
						</router-link> -->
						<el-button v-if="row.status==1" v-perms="['demand.demand/checkDemand']" type="primary" link @click="onClick_check(row)">审核</el-button>
						<el-button v-if="row.status==2||row.status==4" v-perms="['demand.demand/closeDemand']" type="danger" link @click.stop="handleClose(row.id)">关闭需求</el-button>
						<el-button  v-if="row.status==2 || row.status==5 || row.status==6" type="primary" link @click.stop="onClick_status(row)">状态详情</el-button>
						<el-button v-if="row.status!=1" v-perms="['demand.demand/addFollow']" type="primary" link @click.stop="onClick_follow(row)">跟进记录</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<status-dialog ref="statusLog" @change="getLists" />
		<genjin-dialog ref="genjinLog" @change="getLists" />
	</div>
</template>
<script lang="ts" setup name="demandLists">
	import { demandLists, demandDetail, demandClose, demandCheck, demandAbutmentRecord } from '@/api/demand/lists';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import router, {getRoutePath} from '@/router';
	// import { shallowRef, ref, onMounted } from 'vue';
	import statusDialog from './statusDialog.vue'
	import genjinDialog from './genjinDialog.vue'
	import useAppStore from '@/stores/modules/app'
	const useApp = useAppStore()
	const optionCity:any = useApp.optionCity;
	const tabList = ref([{ name: '全部', id: ['1', '2', '3'] }, { name: '待处理', id: ['1'] }, { name: '已处理', id: ['2', '3'] }]);
	let queryParams = reactive({
		check_status: '全部',
		audit_status: 0,
		check_status_arr: ['1', '2', '3'],
		status: 0,
		real_name: '',
		check_admin_name: '',
		account: '',
		start_time: '',
		end_time: '',
		check_start_time: '',
		check_end_time: '',
		area_id: '',
		is_accelerated: '',
		source_type: '',
		add_wx: 0
	});
	let optionsData = reactive({
		status_list: [
			{name:'全部',id:0},
			{name:'审核中',id:1},
			{name:'发布中',id:2},
			{name:'审核驳回',id:3},
			// {name:'对接中',id:4},
			{name:'已完结',id:5},
			{name:'已关闭',id:6},
		],
		check_status_arr_list: [
			{name:'全部',id:0},
			{name:'审核通过',id:2},
			{name:'审核驳回',id:3},
		]
	});
	// const cateTxt = (num:any) => {
	// 	return computed(():string=>{
	// 		let txt = '';
	// 		switch(num) {
	// 			case 1: txt = '待支付';break;
	// 			case 2: txt = '支付中';break;
	// 			case 3: txt = '等待确认（对公）';break;
	// 			case 4: txt = '支付成功 ';break;
	// 			case 5: txt = '支付失败 ';break;
	// 			case 6: txt = '已作废 ';break;
	// 		}
	// 		return txt;
	// 	})
	// }
	onMounted(async () => {
		getLists();
	});
	const handleChange = (val : any) => {
		queryParams.check_status_arr = val == '全部' ? ['1', '2', '3'] : val == '待处理' ? ['1'] : val == '已处理' ? ['2', '3'] : [];
		if( val=='已处理' ){
			if( queryParams.audit_status==0 ){
				queryParams.check_status_arr = ['2', '3'];
			}else if( queryParams.audit_status==2 ){
				queryParams.check_status_arr = ['2'];
			}else if( queryParams.audit_status==3 ){
				queryParams.check_status_arr = ['3'];
			}
		}
		getLists();
	}
	
	const changeAuditStatus = (val : any) => {
		if( val==0 ){
			queryParams.check_status_arr = ['2', '3'];
		}else if( val==2 ){
			queryParams.check_status_arr = ['2'];
		}else if( val==3 ){
			queryParams.check_status_arr = ['3'];
		}
	}

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: demandLists,
		params: queryParams
	})

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }

	const handleClose = async (id : number) => {
		await feedback.confirm('需求关闭后，渠道人员将不能再查看该需求，确认帮助用户关闭该需求？')
		await demandClose({ id })
		getLists()
	}

	const handle = (row: any) => {
		console.log(row)
		// 新老需求的区别
		if (row.credit_level == 0) {
			router.push({
				path: getRoutePath('demand.demand/editDemand'), query: { id: row.id, area_id: row.area_id }
			})
		} else {
			router.push({
				path: getRoutePath('demand.demand/detail'), query: { id: row.id }
			})
		}
	}
	// 审核
	const onClick_check = (row: any) => {
		// 新老需求的区别
		if (row.credit_level == 0) {
			router.push({
				path: getRoutePath('demand.demand/editDemand'), query: { id: row.id, area_id: row.area_id }
			})
		} else {
			router.push({
				path: getRoutePath('demand.demand/detail'), query: { id: row.id }
			})
		}
	}

	onActivated(() => {
		// getLists()
	})
	const statusLog = ref();
	const onClick_status = (row:any) => {
		console.log(row)
		console.log(statusLog.value)
		statusLog.value.dialogVisible(row);
	}
	const genjinLog = ref();
	const onClick_follow = (row:any) => {
		console.log(row)
		genjinLog.value.dialogVisible(row);
	}

	// getLists()
	// getOffice()
</script>
<style lang="scss" scoped>
.type{
	::v-deep .el-input__wrapper{
		width: 280px;
	}
}
.date-inp{
	::v-deep .el-range-editor.el-input__wrapper{
		width: 280px;
	}
}
</style>